debounce

What is debounce?

The debounce npm package provides a function that delays the execution of a function until after a specified wait time has elapsed since the last time it was invoked. This is particularly useful for rate-limiting the execution of functions that may be called frequently, such as during window resizing, scrolling, or keyboard input, to improve performance and reduce the number of unnecessary function calls.

What are debounce's main functionalities?

Debouncing function calls

This code sample demonstrates how to use the debounce package to debounce a function that logs 'Input saved!' to the console. The function will only be called after 250 milliseconds have passed without the 'input' event being triggered.

const debounce = require('debounce');
const saveInput = debounce(() => console.log('Input saved!'), 250);
window.addEventListener('input', saveInput);

Immediate invocation option

This code sample shows how to use the debounce package with the immediate flag set to true. This causes the function to be executed immediately on the first call, then debounced for subsequent calls within the 250-millisecond timeframe.

const debounce = require('debounce');
const processChange = debounce(() => console.log('Change processed!'), 250, true);
window.addEventListener('change', processChange);

Canceling a debounced call

This code sample illustrates how to cancel a debounced function call. The 'cancel' method is used to prevent the debounced function from being called if it has not yet been executed.

const debounce = require('debounce');
const expensiveOperation = debounce(() => console.log('Operation executed!'), 1000);
expensiveOperation();
expensiveOperation.cancel();

Other packages similar to debounce

lodash.debounce

lodash.debounce is a function from the popular Lodash library that provides debouncing capabilities. It is similar to debounce but comes with additional options for leading and trailing invocation, and maxWait time. Lodash's debounce is often preferred for its extended functionality and reliability within the Lodash ecosystem.

throttle-debounce

throttle-debounce is a package that offers both throttle and debounce functions. While debounce delays function execution, throttle ensures that a function is only called at most once in a specified period. This package is useful for those who need both functionalities and prefer a combined solution.

p-debounce

p-debounce is a package that provides debouncing functionality for promises. It is similar to debounce but is specifically designed to work with functions that return promises, ensuring that a promise-returning function is not invoked too frequently.

README

debounce

Useful for implementing behavior that should only happen after a repeated action has completed.

Installation

$ component install component/debounce

Or in node:

$ npm install debounce

Example

var debounce = require('debounce');
window.onresize = debounce(resize, 200);

function resize(e) {
  console.log('height', window.innerHeight);
  console.log('width', window.innerWidth);
}

To later clear the timer and cancel currently scheduled executions:

window.onresize.clear();

To execute any pending invocations and reset the timer:

window.onresize.flush();

Alternately, if using newer syntax:

import { debounce } from "debounce";

API

debounce(fn, wait, [ immediate || false ])

Creates and returns a new debounced version of the passed function that will postpone its execution until after wait milliseconds have elapsed since the last time it was invoked.

Pass true for the immediate parameter to cause debounce to trigger the function on the leading edge instead of the trailing edge of the wait interval. Useful in circumstances like preventing accidental double-clicks on a "submit" button from firing a second time.

The debounced function returned has a property 'clear' that is a function that will clear any scheduled future executions of your function.

The debounced function returned has a property 'flush' that is a function that will immediately execute the function if and only if execution is scheduled, and reset the execution timer for subsequent invocations of the debounced function.

License

MIT

Original implementation is from underscore.js which also has an MIT license.